<template>
  <div v-show="TFValue1">
    <el-menu
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
    >
      <el-sub-menu index="1">
        <template #title><span style="font-weight: bold;font-size: 20px">功能</span></template>
        <el-menu-item style="display: flex; justify-content: center; align-items: center;width: 75px"
                      @click="frontDesk()"><span style="font-weight: bold;font-size: 15px">员工前台</span></el-menu-item>
      </el-sub-menu>
    </el-menu>
    <!--该div我是html以文件为基准做的相对路径,显示错误可 忽视 -->
    <div
        style="height: 700px;display: flex;align-items: center; /* 垂直居中 */justify-content: center;background-image:url('../img/bg.jpg');background-size: cover;background-position: center center; background-repeat: no-repeat;">
      <div
          style="width: 400px;height: 250px;border: 1px rgba(0,0,0,0.13) solid;border-radius:10px;display: flex;align-items: center; /* 垂直居中 */justify-content: center;background: linear-gradient(135deg, rgba(161,196,253,0.53), rgba(225,251,194,0.55));">
        <div
            style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
          <span style="margin: 0;font-size: 30px;color: rgba(47,111,232,0.59);font-weight: bold">Login</span>
          <br>
          <el-input
              v-model="admin.username"
              style="width: 240px"
              placeholder="账号"
              clearable
              :prefix-icon="User"
          />
          <el-input
              v-model="admin.password"
              style="width: 240px;margin-top: 5px;"
              type="password"
              placeholder="密码"
              show-password
              clearable
              :prefix-icon="Notebook"
          />
          <div style="display: flex; align-items: center; height: 40px;">
            <el-input
                v-model="admin.token"
                style="width: 170px;"
                placeholder="验证码"
                clearable
                :prefix-icon="Grid"
            />
            <img id="captchaImage" title="验证码" alt="验证码" @click="refreshCaptcha()"
                 style="cursor: pointer;width: 70px;margin: auto;border-radius:10% ">
            <!--            <img id="captchaImage" src="http://192.168.110.84:8081/login/captcha" title="验证码" alt="验证码" @click="refreshCaptcha()" style="cursor: pointer;width: 70px;margin: auto;border-radius:10px ">-->
          </div>
          <el-button type="primary" plain @click="login()"
                     style="height: 30px;width: 60%;font-size: 17px;border-radius: 10px; transition: width 0.3s;">登录
          </el-button>

        </div>
      </div>
    </div>
  </div>
  <div v-show="!TFValue1">
    <el-menu
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
    >
      <el-sub-menu index="1">
        <template #title><span style="font-weight: bold;font-size: 20px">功能</span></template>
        <el-menu-item style="display: flex; justify-content: center; align-items: center;width: 100px"
                      @click="frontDesk()">员工前台
        </el-menu-item>
        <el-menu-item style="display: flex; justify-content: center; align-items: center;width: 100px" index="2-3"
                      @click="dialogFormVisible = true">修改密码
        </el-menu-item>
        <el-menu-item style="display: flex; justify-content: center; align-items: center;width: 100px"
                      @click="updateTFValue()">退出登录
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
    <el-dialog v-model="dialogFormVisible" title="修改密码" width="400">
      <div class="form-container">
        <el-form :model="updatePD" style="max-width: 300px; /* 根据需要调整最大宽度 */margin: auto; /* 水平居中 */">
          <div>
            <el-input placeholder="输入旧密码" v-model="updatePD.oldPasswords" autocomplete="off"/>
          </div>
          <div>
            <el-input placeholder="输入新密码" v-model="updatePD.newPasswords" autocomplete="off"/>
          </div>
        </el-form>
      </div>
      <div class="button-container">
        <el-button @click="dialogFormVisible = false;">取消</el-button>
        <el-button type="primary" @click="updatePassword()">
          修改
        </el-button>
      </div>
    </el-dialog>
    <HighestPrivileges/>
  </div>
</template>

<script setup lang="ts">
// import {onMounted, reactive, ref} from "vue";
import {reactive, ref, watch} from "vue";
import {User, Notebook, Grid} from '@element-plus/icons-vue'
import axios from "axios";
import HighestPrivileges from "./HighestPrivileges .vue"
import {ElMessage} from "element-plus";

const dialogFormVisible = ref(false)
watch(() => dialogFormVisible.value, (newValue) => {
  if (!newValue) {
    updatePD.oldPasswords = '';
    updatePD.newPasswords = ''
  }
});
const admin = reactive({
  username: '',
  password: '',
  token: ''
})

const updatePD = reactive({
  oldPasswords: '',
  newPasswords: '',
})

function updatePassword() {

  axios.post('http://192.168.110.84:8081/login/updatePassword/' + admin.username, updatePD)
      .then(response => {
        // 处理响应
        if (response.data.code === 1) {
          ElMessage({
            message: response.data.message,
            type: 'success',
          })
          dialogFormVisible.value = false
        } else {
          ElMessage.error(response.data.message)
          updatePD.oldPasswords = '';
          updatePD.newPasswords = ''
        }
      });

}

function frontDesk() {
  window.location.href = '../index.html';
}

const TFValue1 = ref(true)


function refreshCaptcha() {
  var captchaImage = document.getElementById('captchaImage');
  // 添加一个随机参数来防止浏览器缓存图片
  // 选择添加当前时间
  captchaImage.src = 'http://192.168.110.84:8081/login/captcha?' + new Date().getTime();
}

function updateTFValue() {
  TFValue1.value = true
  refreshCaptcha()
}

/*onMounted(() => {
  refreshCaptcha()
});*/
function login() {
  axios.post('http://192.168.110.84:8081/login/login', admin)
      .then(response => {
        // 处理响应
        if (response.data.code === 1) {
          ElMessage({
            message: response.data.message,
            type: 'success',
          })
          TFValue1.value = response.data.data
          admin.password = ''
          admin.token = ''
        } else {
          ElMessage.error(response.data.message)
          if (response.data.message == "验证码错误") {
            admin.token = ''
            refreshCaptcha()
          } else {
            admin.password = ''
            admin.token = ''
            refreshCaptcha()
          }
        }
      });
}

// 在页面加载时刷新验证码
window.onload = refreshCaptcha;
</script>

<style scoped>
.login-form {
  width: 300px;
  margin: 100px auto;
}

.el-menu--horizontal {
  mdisplay: flex;
  justify-content: flex-end;
}


.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px; /* 根据需要调整高度 */
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px; /* 根据需要调整高度 */
}
</style>